<template>
    <div class="user-collect">
        <div class="show-line">
            <div class="line"></div>
            <div class="label">
                全部商品
                <span class="amount">({{collectList.length}})</span>
                <span class="manager-more" @click="showDelete=!showDelete">{{showDelete?'退出批量管理':'批量管理'}}</span>
                <span style="margin: 0px 50px" v-if="showDelete"><el-checkbox v-model="chooseAll"
                                                                              @change="chooseAllChange()">全选</el-checkbox></span>
                <span v-if="showDelete"><el-button type="text" size="mini" style="color: red" @click="deleteMore()">删除</el-button></span>
            </div>
        </div>

        <div>
            <el-row :gutter="40">
                <el-col :span="4" v-for="(item,index) in collectList" :key="index" style="margin: 10px 0px">
                    <div class="commodity">
                        <span style="position: absolute;margin:10px" v-if="showDelete"><el-checkbox v-model="item.radio"></el-checkbox></span>
                        <div><img :src="item.commodityImgurl?imgUrl+item.commodityImgurl:src" class="img"></div>
                        <div style="text-align: right;position: relative;bottom: 50px;right: 20px;cursor: pointer;font-size: 24px;color: #FFFFFF">
                            <i class="el-icon-delete" @click="deleteOne(item)"></i></div>
                        <div class="info">
                            <div>
                                <div class="name">{{item.commodityName}}</div>
                                <div class="price">￥{{item.price}}</div>
                            </div>
                            <div>
                                <el-button size="small" class="btn" @click="handleAddCart(item)">加入购物车</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="search-more" @click="loadingMore()" v-if="collectList.length>9">点击加载更多</div>

        <!--        dialog-->
        <!--        删除提示弹窗-->
        <el-dialog :visible.sync="deleteDialogVisible" width="300px" center :modal="true" top="40vh">
            <div align="center"><span>确定从收藏中移除选中的商品？</span></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteByIds()">确 定</el-button>
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>

</template>

<script src="./user.collect.js"></script>
<style lang="scss" src="./user.collect.scss"></style>
